<template>
<div class="container">
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>添加商品</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="back">返回</el-button>
      <div style="margin: 20px 0">
        <el-form ref="form" :model="addForm" label-width="80px">
          <el-form-item label="品牌名称">
            <el-input v-model="addForm.brandName" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="类目ID">
            <el-input v-model="addForm.categoryId" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="文章图片">
            <el-upload
              action="/oss/img"
              :file-list="fileList"
              list-type="picture-card"
              name="object"
              :on-success="uploadSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"/>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImg" alt="">
            </el-dialog>
          </el-form-item>
          <el-form-item label="类目名称">
            <el-input v-model="addForm.categoryName" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="商品ID">
            <el-input v-model="addForm.goodsId" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="	SKU名称">
            <el-input v-model="addForm.name" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="	优惠金额">
            <el-input v-model="addForm.preMoney" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="	价格">
            <el-input v-model="addForm.price" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="	规格">
            <el-input v-model="addForm.spec" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addSubmit">确 定</el-button>
            <el-button @click="back">取 消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-card>
</div>
</template>

<script>
import { addEquipmentList } from '@/api/equipment'

export default {
  name: 'addRecommendProject',
  data(){
    return{
      addForm:{},
      // 上传图片数据
      fileList: [],
      dialogVisible: false,
      dialogImg: '',
    }
  },
  watch: {
    fileList(newFileList, oldFileList) {
      this.addForm.images = newFileList.length === 0 ? null : newFileList.map(item => item.url).join(',')
    }
  },
  methods:{
    //  图片上传成功时的回调
    uploadSuccess(file, fileList) {
      this.fileList.push({url: fileList.response.data})
    },
    // 移除上传图片数据
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    handlePictureCardPreview(file) {
      this.dialogVisible = true
      this.dialogImg = file.url
    },
    back() {
      this.$store.dispatch('tagsView/delVisitedView', this.$route)
      this.$router.push('/offer/equipment')
    },
  //  提交表单数据
    addSubmit(){
      addEquipmentList({
        brandName:this.addForm.brandName,
        categoryId:this.addForm.categoryId,
        categoryName:this.addForm.categoryName,
        goodsId:this.addForm.goodsId,
        images:this.addForm.images,
        name:this.addForm.name,
        preMoney:this.addForm.preMoney,
        price:this.addForm.price,
        spec:this.addForm.spec
      }).then(res=>{
        this.$message.success('添加成功')
        this.back()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  padding: 20px;
}
</style>
